/**
* I think element-ui's default theme color is too light for long-term use.
* So I modified the default color and you can modify it to your liking.
**/

/* theme color */
$--color-primary: #1890ff;
$--color-success: #13ce66;
$--color-warning: #ffba00;
$--color-danger: #ff4949;
// $--color-info: #1E1E1E;

$--button-font-weight: 400;

// $--color-text-regular: #1f2d3d;

$--border-color-light: #cccccc; // 改为浅灰色
$--border-color-lighter: #e0e0e0; // 改为更浅的灰色

$--table-border: 1px solid #999999; // 改为中灰色边框

/* 添加el-table背景颜色 */
$--table-background-color: #113f74; // 深蓝色背景
$--table-header-background-color: #1477f1; // 表头深蓝色
$--table-row-hover-background-color: #2a4d75; // 行悬停颜色

/* icon font path, required */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

// 覆盖el-table样式
.el-table {
  background-color: $--table-background-color !important;
  
  th {
    background-color: $--table-header-background-color !important;
    color: #e3e3ec !important;
    border-color: #999999 !important; // 添加表头边框灰色
  }
  
  td {
    background-color: $--table-background-color !important;
    color: #e3e3ec !important;
    border-color: #999999 !important; // 添加单元格边框灰色
  }
  
  // 添加表格整体边框颜色
  &.el-table--border {
    border: 1px solid #999999 !important;
    
    th, td {
      border-right: 1px solid #999999 !important;
    }
  }
  
  tr:hover {
    & > td {
      background-color: $--table-row-hover-background-color !important;
    }
  }
}

// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
  theme: $--color-primary;
}